<template>
    <div>
        <el-input v-model="data_name" @change="tovalue()" clearable :disabled="disabled">
            <template slot="append">
                <div class="el-input-group__append_custom" @click="openSelect()">选择</div>
            </template>
        </el-input>
    </div>
</template>

<script>
export default {
    data() {
        return {
            data_name:null,
            fromSetVal:false,
            showId: true,
            url:'business/my/GetOrderData'
        }
    },
    mounted() {
    },
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        value: {
            type: String,
            default: function () {
                return null;
            }
        },
        disabled: {
            type: Boolean,
            default: function () {
                return false;
            }
        },
    },
    watch: {
        value: {
            async handler(newval, oldval) {
                if (newval != null) {
                    this.data_name = newval;
                }
            },
            immediate: true
        },
    },
    methods: {
        openSelect() {
            if(this.disabled){return;}
            elm.dialog.open(this,"elm-select-input-dialog","选择",450,600,
                {data_url:this.url,data_id:this.value,show_id:this.showId},false,
                {
                    theme: "white",
                    backgroundImage: " linear-gradient(to right, #fff, #fff);", backgroundColor: "#fff", color: "#666"
                });

        },
        async setVal(val)
        {
            this.fromSetVal=true;
            this.$emit('update:value',val);
            this.$emit('change', val);
            if (val != null) {
                let res = await elm.post(this.url, {select_id: val});
                if (res.pagedata != undefined) {
                    this.data_name = res.pagedata[0]["select_id"];
                }
                else {
                    this.data_name = res[0]["select_id"];
                }
            }
            this.fromSetVal=false;
        },
        tovalue() {
            if(this.fromSetVal!=true) {
                this.$emit('update:value', this.data_name);
                this.$emit('change', this.data_name);
            }
        }
    }
}
</script>
<style>
.el-input-group__append_custom
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    line-height: 32px;
    text-align: center;
}
.el-input-group__append_custom:hover
{
    background-color: rgba(0, 0, 0, 0.05);
}
.el-input-group__append_custom:active
{
    background-color: rgba(0, 0, 0, 0.2);
}
</style>
